<template>
  <div class="card-dialog" v-show="visible">
    <div class="dialog-head">
      <div class="head-title">
        <div class="head-icon"></div>
        <div class="head-text">{{ title }}</div>
      </div>
      <div class="head-button">
        <a-button class="back-button" type="primary" size="small" @click="handleClose">返回</a-button>
      </div>
    </div>
    <div class="dialog-content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
  import { nextTick } from 'vue';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
  });

  const emit = defineEmits(['update:visible', 'close']);
  function handleClose() {
    emit('update:visible', !props.visible);
    nextTick(() => {
      emit('close');
    });
  }
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
